<template>
  <div>
    <el-card>
      <div class="connection-list-top">
        <div class="left-search-input-group">
          <div class="left-search-input">
            <el-input
              placeholder="请输入连接名称关键字搜索"
              v-model="keyword"
              @change="searchByKeyword"
              :clearable="true"
              style="width: 300px"
            >
            </el-input>
          </div>
        </div>
        <div class="right-add-button-group">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-document-add"
            @click="addConnection"
            >添加</el-button
          >
        </div>
      </div>

      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="tableData"
        size="small"
        border
      >
        <el-table-column
          prop="id"
          label="编号"
          min-width="5%"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="连接名称"
          show-overflow-tooltip
          min-width="20%"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="18%"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="数据库类型"
          show-overflow-tooltip
          min-width="10%"
        ></el-table-column>
        <el-table-column
          prop="version"
          label="驱动版本"
          show-overflow-tooltip
          min-width="12%"
        ></el-table-column>
        <el-table-column
          prop="url"
          label="JDBC连接串"
          show-overflow-tooltip
          min-width="15%"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          show-overflow-tooltip
          min-width="10%"
        ></el-table-column>
        <el-table-column label="操作" min-width="35%">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-video-play"
                @click="handleTest(scope.$index, scope.row)"
                round
                >测试</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-document"
                @click="handleMore(scope.$index, scope.row)"
                round
                >详情</el-button
              >
              <el-button
                size="small"
                type="warning"
                icon="el-icon-edit"
                @click="handleUpdate(scope.$index, scope.row)"
                round
                >编辑</el-button
              >
              <el-button
                size="small"
                type="success"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
                round
                >删除</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div class="page" align="right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

      <el-dialog
        title="查看数据库连接信息"
        :visible.sync="dialogFormVisible"
        :showClose="false"
        :before-close="handleClose"
      >
        <el-form :model="queryForm" size="mini">
          <el-form-item label="连接名称" label-width="120px" style="width: 85%">
            <el-input
              v-model="queryForm.name"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库类型"
            label-width="120px"
            style="width: 85%"
          >
            <el-input
              v-model="queryForm.type"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="数据库驱动"
            label-width="120px"
            style="width: 85%"
          >
            <el-input
              v-model="queryForm.driver"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="驱动版本号"
            label-width="120px"
            style="width: 85%"
          >
            <el-input
              v-model="queryForm.version"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="JDBC连接串"
            label-width="120px"
            style="width: 85%"
          >
            <el-input
              type="textarea"
              :rows="6"
              :spellcheck="false"
              v-model="queryForm.url"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号名称" label-width="120px" style="width: 85%">
            <el-input
              v-model="queryForm.username"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="连接密码" label-width="120px" style="width: 85%">
            <el-input
              type="password"
              v-model="queryForm.password"
              auto-complete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="添加数据源连接信息"
        :visible.sync="createFormVisible"
        :showClose="false"
        :before-close="handleClose"
      >
        <el-form
          :model="createform"
          size="mini"
          status-icon
          :rules="rules"
          ref="createform"
        >
          <el-form-item
            label="连接名称"
            label-width="120px"
            :required="true"
            prop="name"
            style="width: 85%"
          >
            <el-input v-model="createform.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="数据库类型"
            label-width="120px"
            :required="true"
            prop="type"
            style="width: 85%"
          >
            <el-select
              v-model="createform.type"
              @change="selectChangedDriverVersion"
              placeholder="请选择数据库"
            >
              <el-option
                v-for="(item, index) in databaseType"
                :key="index"
                :label="item.type"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="驱动版本"
            label-width="120px"
            :required="true"
            prop="version"
            style="width: 85%"
          >
            <el-select v-model="createform.version" placeholder="请选择版本">
              <el-option
                v-for="(item, index) in connectionDriver"
                :key="index"
                :label="item.driverVersion"
                :value="item.driverVersion"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="JDBC连接串"
            label-width="120px"
            :required="true"
            prop="url"
            style="width: 85%"
          >
            <el-tooltip placement="top">
              <i class="el-icon-question">样例:</i>
              <div slot="content">
                {{ createform.sample }}
              </div>
            </el-tooltip>
            <el-input
              type="textarea"
              :rows="6"
              :spellcheck="false"
              placeholder="请输入"
              v-model="createform.url"
              auto-complete="off"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="账号名称"
            label-width="120px"
            prop="username"
            style="width: 85%"
          >
            <el-input
              v-model="createform.username"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="连接密码"
            label-width="120px"
            prop="password"
            style="width: 85%"
          >
            <el-input
              type="password"
              v-model="createform.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="createFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCreate">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="修改数据源连接信息"
        :visible.sync="updateFormVisible"
        :showClose="false"
        :before-close="handleClose"
      >
        <el-form
          :model="updateform"
          size="mini"
          status-icon
          :rules="rules"
          ref="updateform"
        >
          <el-form-item
            label="连接名称"
            label-width="120px"
            :required="true"
            prop="name"
            style="width: 85%"
          >
            <el-input v-model="updateform.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="数据库类型"
            label-width="120px"
            :required="true"
            prop="type"
            style="width: 85%"
          >
            <el-select
              v-model="updateform.type"
              @change="selectChangedDriverVersion"
              placeholder="请选择数据库"
            >
              <el-option
                v-for="(item, index) in databaseType"
                :key="index"
                :label="item.type"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="驱动版本"
            label-width="120px"
            :required="true"
            prop="version"
            style="width: 85%"
          >
            <el-select v-model="updateform.version" placeholder="请选择版本">
              <el-option
                v-for="(item, index) in connectionDriver"
                :key="index"
                :label="item.driverVersion"
                :value="item.driverVersion"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="JDBC连接串"
            label-width="120px"
            :required="true"
            prop="url"
            style="width: 85%"
          >
            <el-input
              type="textarea"
              :rows="6"
              :spellcheck="false"
              v-model="updateform.url"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="账号名称"
            label-width="120px"
            prop="username"
            style="width: 85%"
          >
            <el-input
              v-model="updateform.username"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="连接密码"
            label-width="120px"
            prop="password"
            style="width: 85%"
          >
            <el-input
              type="password"
              v-model="updateform.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      keyword: null,
      lists: [],
      currentPage: 1,
      pageSize: 10,
      totalCount: 2,
      databaseType: [],
      connectionDriver: [],
      tableData: [],
      queryForm: {
        title: "",
        type: "",
        url: "",
        diver: "",
        version: "",
        username: "",
        password: "",
      },
      createform: {
        title: "",
        type: "",
        diver: "",
        sample: "",
        url: "",
        version: "",
        username: "",
        password: "",
      },
      updateform: {
        id: 0,
        title: "",
        type: "",
        diver: "",
        version: "",
        username: "",
        password: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "数据库类型必须选择",
            trigger: "change",
          },
        ],
        version: [
          {
            required: true,
            message: "驱动版本必须选择",
            trigger: "change",
          },
        ],
        url: [
          {
            required: true,
            message: "Jdbc URL必须提供",
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: "连接账号名必须提供",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "连接密码必须提供",
            trigger: "blur",
          },
        ],
      },
      dialogFormVisible: false,
      createFormVisible: false,
      updateFormVisible: false,
    };
  },
  methods: {
    loadData: function () {
      this.$http({
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        url: "/dbswitch/admin/api/v1/connection/list",
        data: JSON.stringify({
          searchText: this.keyword,
          page: this.currentPage,
          size: this.pageSize,
        }),
      }).then(
        (res) => {
          if (0 === res.data.code) {
            this.currentPage = res.data.pagination.page;
            this.pageSize = res.data.pagination.size;
            this.totalCount = res.data.pagination.total;
            this.tableData = res.data.data;
          } else {
            alert("加载任务列表失败:" + res.data.message);
          }
        },
        function () {
          console.log("load connection list failed");
        }
      );
    },
    searchByKeyword: function () {
      this.currentPage = 1;
      this.loadData();
    },
    loadDatabaseTypes: function () {
      this.databaseType = [];
      this.$http({
        method: "GET",
        url: "/dbswitch/admin/api/v1/connection/types",
      }).then(
        (res) => {
          if (0 === res.data.code) {
            this.databaseType = res.data.data;
          } else {
            alert("加载任务列表失败:" + res.data.message);
          }
        },
        function () {
          console.log("failed");
        }
      );
    },
    handleClose(done) {},
    handleDelete: function (index, row) {
      this.$confirm(
        "此操作将此数据源ID=" + row.id + "删除么, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http
          .delete("/dbswitch/admin/api/v1/connection/delete/" + row.id)
          .then((res) => {
            //console.log(res);
            if (0 === res.data.code) {
              this.loadData();
            } else {
              alert("删除任务失败:" + res.data.message);
            }
          });
      });
    },
    handleMore: function (index, row) {
      this.dialogFormVisible = true;
      this.queryForm = row;
    },
    handleTest: function (index, row) {
      this.$http
        .get("/dbswitch/admin/api/v1/connection/test/" + row.id)
        .then((res) => {
          //console.log(res);
          if (0 === res.data.code) {
            alert("测试连接成功!");
          } else {
            alert("测试连接失败," + res.data.message);
          }
        });
    },
    addConnection: function () {
      this.createFormVisible = true;
      this.createform = {};
    },
    handleCreate: function () {
      let driverClass = "";
      if (this.databaseType.length > 0) {
        for (let i = 0; i < this.databaseType.length; i++) {
          //console.log(this.databaseType[i])
          if (this.databaseType[i].type == this.createform.type) {
            driverClass = this.databaseType[i].driver;
            break;
          }
        }
      }

      this.$refs["createform"].validate((valid) => {
        if (valid) {
          this.$http({
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            url: "/dbswitch/admin/api/v1/connection/create",
            data: JSON.stringify({
              name: this.createform.name,
              type: this.createform.type,
              version: this.createform.version,
              driver: driverClass,
              url: this.createform.url,
              username: this.createform.username,
              password: this.createform.password,
            }),
          }).then((res) => {
            if (0 === res.data.code) {
              this.createFormVisible = false;
              this.$message("添加连接信息成功");
              this.createform = {};
              this.loadData();
            } else {
              alert("添加连接信息失败:" + res.data.message);
            }
          });
        } else {
          alert("请检查输入");
        }
      });
    },
    selectChangedDriverVersion: function (value) {
      this.connectionDriver = [];
      this.$http
        .get("/dbswitch/admin/api/v1/connection/" + value + "/drivers")
        .then((res) => {
          if (0 === res.data.code) {
            this.connectionDriver = res.data.data;
            let varDatabaseType = this.databaseType.find((item) => {
              return item.type === value;
            });
            if (varDatabaseType) {
              this.createform.sample = varDatabaseType.sample;
            }
          } else {
            this.$message.error(
              "查询数据库可用的驱动版本失败," + res.data.message
            );
            this.connectionDriver = [];
          }
        });
    },
    handleUpdate: function (index, row) {
      this.updateform = JSON.parse(JSON.stringify(row));
      this.$http
        .get(
          "/dbswitch/admin/api/v1/connection/" +
            this.updateform.type +
            "/drivers"
        )
        .then((res) => {
          if (0 === res.data.code) {
            this.connectionDriver = res.data.data;
          } else {
            this.$message.error(
              "查询数据库可用的驱动版本失败," + res.data.message
            );
            this.connectionDriver = [];
          }
        });
      this.updateFormVisible = true;
    },
    handleSave: function () {
      let driverClass = "";
      if (this.databaseType.length > 0) {
        for (let i = 0; i < this.databaseType.length; i++) {
          //console.log(this.databaseType[i])
          if (this.databaseType[i].type == this.updateform.type) {
            driverClass = this.databaseType[i].driver;
            break;
          }
        }
      }

      this.$refs["updateform"].validate((valid) => {
        if (valid) {
          this.$http({
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            url: "/dbswitch/admin/api/v1/connection/update",
            data: JSON.stringify({
              id: this.updateform.id,
              name: this.updateform.name,
              type: this.updateform.type,
              version: this.updateform.version,
              driver: driverClass,
              url: this.updateform.url,
              username: this.updateform.username,
              password: this.updateform.password,
            }),
          }).then((res) => {
            if (0 === res.data.code) {
              this.updateFormVisible = false;
              this.$message("修改连接信息成功");
              this.loadData();
              this.updateform = {};
            } else {
              alert("修改连接信息失败:" + res.data.message);
            }
          });
        } else {
          alert("请检查输入");
        }
      });
    },
    handleSizeChange: function (pageSize) {
      this.loading = true;
      this.pageSize = pageSize;
      this.loadData();
    },

    handleCurrentChange: function (currentPage) {
      this.loading = true;
      this.currentPage = currentPage;
      this.loadData();
    },
  },
  created() {
    this.loadDatabaseTypes();
    this.loadData();
  },
};
</script>

<style scoped>
.el-table {
  width: 100%;
  height: 100%;
}
.el-card,
.el-message {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.connection-list-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.left-search-input-group {
  width: calc(100% - 100px);
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}
.left-search-input {
  width: 300px;
  margin-right: auto;
  margin: 10px 5px;
}
.right-add-button-group {
  width: 100px;
  margin-left: auto;
  margin: 10px 5px;
}
</style>
